import React, { useRef, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import {Button, Form, Image, message, Modal, Popconfirm, Skeleton, Switch} from 'antd';
import { DeleteOutlined, EditOutlined, UploadOutlined } from '@ant-design/icons';
import {getInquirysList, editInquirysRecommend, editInquirysStatus, delInquirys, getInquirysDtail, editInquirys,} from '@/services/inquirys';
import ProForm, { ProFormText } from '@ant-design/pro-form';
import VditorMd from '@/components/VditorMd';
import {putArticleServe, storeArticleServe} from "@/services/article";
const Inquirys = () => {
  const ref = useRef();

  // 添加 模态框是否显示 状态
  const [Visible, setVisible] = useState(false);
  // 初始化数据列表 定义设置状态
  const [initialValues, setInitialValues] = useState(undefined);
  // 文本框输入的md数据
  const [vditorMdData,setVditorMdData] = useState(undefined);
  // 文本框输入的html数据
  const [vditorHtmlData,setVditorHtmlData] = useState(undefined);

  const valueEnum = {
    1: { text: '通过审核', status: 'Success' },
    0: { text: '正在审核', status: 'Processing' },
  };
  const valueEnum1 = {
    1: { text: '推荐', status: 'Success' },
    0: { text: '未推荐', status: 'Processing' },
  };

  //定义表格字段
  const columns = [
    {
      title: '标题',
      dataIndex: 'title',
    },
    {
      title: '内容',
      dataIndex: 'describe',
      ellipsis: true,
      hideInSearch: true,
    },

    {
      title: '是否推荐',
      dataIndex: 'recommend',
      valueType: 'radioButton',
      width: 100,
      valueEnum: valueEnum1,
      render: (_, record) => {
        return (
          <Switch
            checkedChildren="推荐"
            unCheckedChildren="不推荐"
            onChange={async () => {
              const changeSwitch = await editInquirysRecommend(record.id);
              if (changeSwitch.status == undefined) {
                message.success('改变推荐成功');
              }
            }}
            defaultChecked={record.recommend == 0 ? false : true}
          />
        );
      },
    },
    {
      title: '审核状态',
      dataIndex: 'status',
      valueType: 'radioButton',
      width: 100,
      valueEnum,
      render: (_, record) => {
        return (
          <Switch
            checkedChildren="通过审核"
            unCheckedChildren="审核中"
            onChange={async () => {
              const changeSwitch = await editInquirysStatus(record.id);
              if (changeSwitch.status === undefined) {
                message.success('改变状态成功');
              }
            }}
            defaultChecked={record.status == 0 ? false : true}
          />
        );
      },
    },
    {
      title: '操作',
      dataIndex: 'content',
      hideInSearch: true,
      render: (_, record) => {
        return (
          <div>
            <Popconfirm
              title="你确定要删除吗？"
              onConfirm={async () => {
                const response = await delInquirys(record.id);
                if (response.status === undefined) {
                  message.success('删除成功');
                  ref.current.reload();
                } else {
                  message.error('删除失败');
                }
              }}
              okText="确认"
            >
              <Button type="primary" danger={true} shape="circle" icon={<DeleteOutlined />} />
            </Popconfirm>
            &nbsp;&nbsp;
            <Button
              type="primary"
              shape="circle"
              onClick={() => handleEditInquirys(record.id)}
              icon={<EditOutlined />}
            />
            &nbsp;&nbsp;
          </div>
        );
      },
    },
  ];

  //查询问答列表的事件的方法
  const handleGetInquirysList = async (params) => {
    params.page = params.current;
    params.current = '';
    params.limit = 5;
    params.pageSize = '';
    params.create_at = params.time;
    params.time = '';
    const res = await getInquirysList(params);
    console.log(res);
    return {
      data: res.data,
      success: true,
      total: res.meta.pagination.total,
    };
  };

  //保存富文本框输入的数据
  const inputData = (mdvalue,htmlvalue)=>{
    setVditorMdData(mdvalue)
    setVditorHtmlData(htmlvalue)
  }

  //问答编辑的方法
  const handleEdit = async (data,vidtormd,vidtorhtml) => {
    data.content = vidtormd
    data.content_md = vidtorhtml
    const res = await editInquirys(data.id, data);
    console.log(res);
    if (res == undefined) {
      message.error('修改失败');
    } else {
      message.success('修改成功');
      setVisible(false);
      ref.current.reload();
    }
  };
  const handleEditInquirys = async (id) => {
    const res = await getInquirysDtail(id);
    console.log(res);
    setInitialValues(res.data);
    setVisible(true);
  };

  return (
    <PageContainer>
      <ProTable
        actionRef={ref}
        columns={columns}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        request={async (params = {}) => handleGetInquirysList(params)}
        dateFormatter="string"
        headerTitle="问答列表"
      />
      <Modal
        title="编辑问答"
        visible={Visible}
        onCancel={() => setVisible(false)}
        footer={false}
        destroyOnClose={true}
      >
        {initialValues == undefined ? <Skeleton active />
        :
          <ProForm
            initialValues={initialValues}
            onFinish={data => handleEdit(data,vditorMdData === undefined ? initialValues.content : vditorMdData,
              vditorHtmlData === undefined ? initialValues.content_md : vditorHtmlData
            )}>
            <ProFormText
              name="title"
              label="问答标题"
              placeholder="请输入问答标题"
              rules={[
                {
                  required: true,
                  message: '请输入问答标题!',
                },
              ]}
            />
            <ProFormText name="id" hidden={true} />
            <Form.Item
              name="content"
              label="问答内容"
              placeholder="请输入问答内容"
              rules={[
                {
                  required: true,
                  message: '请输入问答内容!',
                },
              ]}>
              <VditorMd value={initialValues ? initialValues.content_md : ''} inputData={inputData}/>
            </Form.Item>
          </ProForm>
        }
      </Modal>
    </PageContainer>
  );
};

export default Inquirys;
